<template>
    <view class="content">
        <!-- 渐变色 -->
        <view class="positioning"></view>
        <!-- 顶部 -->
        <view class="my-top">
            <view class="mytop-left" @click="toMy">
                <image class="prirt" :src="userProfile.avatar" mode=""></image>
                <view>{{ userProfile.nickname }}</view>
            </view>
            <view class="mytop-right" @click="scanCode">
                <image class="sweep" src="@/static/sweep.png" mode="aspectFit"></image>
            </view>
        </view>
        <!-- 抵用券 -->
        <view class="consumption">
            <image class="quan-img" src="@/static/consumption.png" mode=""></image>
            <view class="diy">
                <view>可抵用抵用券</view>
                <view class="price1">{{userProfile.voucher}}</view>
            </view>
            <view class="diy2" @click="gojifenduihuan">
                <view>未激活抵用券</view>
                <view class="price1">{{userProfile.coin}}</view>
            </view>
            <!-- 积分 -->
            <view class="points">
                <image class="poins-img" src="@/static/points.png" mode=""></image>
                <view>积分</view>
            </view>
            <view class="points2">{{userProfile.score}}</view>
        </view>
        <!-- 订单 -->
        <view class="order">
            <view class="order-top">
                <view>我的订单</view>
                <view class="you" @click="allor(0)">
                    全部
                    <image class="jur" src="@/static/right1.png" mode=""></image>
                </view>
            </view>
            <view class="order-btm">
                <view class="order-box1" @click="allor(1)">
                    <image class="box1-image" src="@/static/yizhufu.png" mode=""></image>
                    <view>已支付</view>
                    <!-- <view class="poinsp">3</view> -->
                </view>
                <view class="order-box1" @click="allor(2)">
                    <image class="box1-image" src="@/static/daizhifu.png" mode=""></image>
                    <view>待支付</view>
                    <!-- <view class="poinsp">3</view> -->
                </view>
                <view class="order-box1" @click="allor(3)">
                    <image class="box1-image" src="@/static/yihexiao.png" mode=""></image>
                    <view>已核销</view>
                    <!-- <view class="poinsp">3</view> -->
                </view>
            </view>
        </view>
        <!-- 常用设置 -->
        <view class="seeting">
            <view class="changyong">常用设置</view>
            <view class="wai-box1">
                <view class="box-flex felx5" @click="purpose">
                    <image class="flex-img" src="@/static/certificate1.png" mode=""></image>
                    <view>抵用券</view>
                </view>
               <view class="box-flex felx5"  @click="fensi">
                    <image class="flex-img" src="@/static/certificate3.png" mode=""></image>
                    <view>我的粉丝</view>
                </view>
                <view class="box-flex felx5" @click="invite">
                    <image class="flex-img" src="@/static/certificate3.png" mode=""></image>
                    <view>邀请码</view>
                </view>
                <view class="box-flex felx5">
                    <image class="flex-img" src="@/static/certificate4.png" mode=""></image>
					<button open-type="contact" class="contact" :style="{width:'72rpx',height:'72rpx',position:'absolute'}"></button>
                    <view>客服</view>
                </view>
                <view class="box-flex felx5" @click="swruzu">
                    <image class="flex-img" src="@/static/certificate5.png" mode=""></image>
                    <view>商务入驻</view>
                </view>
                <view class="box-flex felx5" @click="swhoutai">
                    <image class="flex-img" src="@/static/certificate5.png" mode=""></image>
                    <view>商务后台</view>
                </view>
                <view class="box-flex felx5" @click="sjruzu">
                    <image class="flex-img" src="@/static/certificate6.png" mode=""></image>
                    <view>商家入驻</view>
                </view>
                <view class="box-flex felx5" @click="sjbackend">
                    <image class="flex-img" src="@/static/certificate7.png" mode=""></image>
                    <view>商家后台</view>
                </view>
				<!-- <view class="box-flex felx5" @click="huishou">
				    <image class="flex-img" src="@/static/merchant3.png" mode=""></image>
				    <view>物品回收</view>
				</view> -->
                <view  class="box-flex felx5" @click="system">
                    <image class="flex-img" src="@/static/certificate8.png" mode=""></image>
                    <view>系统设置</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { user, verified } from '@/api/index.js';
import { utils } from '@/utils/utils.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
const userProfile = ref({}); //存储用户信息
onShow(() => {
    userInfo(); //获取用户信息
});
const gojifenduihuan = ()=>{
	uni.navigateTo({
	    url: '/pages/sub/jfduihuan'
	});
}
// 点击扫一扫，核销订单
const scanCode = () => {
    // 只允许通过相机扫码
    uni.scanCode({
        onlyFromCamera: true,
        success: async function (res) {
			console.log(res)
            // console.log('条码类型：' + res.scanType);
            // console.log('条码内容：' + res.result);
            const ret = await verified(res.result);
            if (ret.code == 1) {
                utils(ret.msg);
            } else {
                utils(ret.msg);
            }
        },
        fail() {
            utils(ret.msg);
        }
    });
};
// 点击头像跳转到用户信息
const toMy = () => {
    uni.navigateTo({
        url: '/pages/sub/information'
    });
};
// 点击全部跳转我的订单
const allor = (value) => {
    uni.navigateTo({
        url: `/pages/sub/myOrder?activeIndex=${value}`
    });
};
// 获取用户信息
const userInfo = async () => {
    const ret = await user();
    if (ret.code == 1) {
        userProfile.value = ret.data;
        // console.log('个人信息', userProfile.value);
    } else {
        utils('数据加载失败！');
    }
};
// 点击系统设置
const system = () => {
    uni.navigateTo({
        url: '/pages/sub/system'
    });
};
// 点击商家入驻 状态:normal=正常,hidden=关闭,audit=审核中,refuse=拒绝
const sjruzu = () => {
    if (userProfile.value.shop == null) {
        uni.navigateTo({
            url: '/pages/sub/sjSettled'
        });
        return;
    }

    if (userProfile.value.shop.status == 'audit') {
        // 店铺审核中
        uni.navigateTo({
            url: '/pages/sub/submit'
        });
    }
    if (userProfile.value.shop.status == 'normal') {
        // 店铺审核成功
        utils('商家入驻成功');
    }
    if (userProfile.value.shop.status == 'hidden') {
        // 店铺审核成功
        utils('已关闭');
    }
    if (userProfile.value.shop.status == 'refuse') {
        // 店铺审核失败
        uni.navigateTo({
            url: '/pages/sub/sjSettled'
        });
    }
};
// 点击商务入驻
const swruzu = () => {
    if (userProfile.value.agent == false) {
        uni.navigateTo({
            url: '/pages/sub/swSettled'
        });
        return;
    }

    if (userProfile.value.agent.status == 'audit') {
        // 店铺审核中
        uni.navigateTo({
            url: '/pages/sub/submit'
        });
    }
    if (userProfile.value.agent.status == 'normal') {
        // 店铺审核成功
        utils('商务入驻成功');
    }
    if (userProfile.value.agent.status == 'hidden') {
        // 店铺审核成功
        utils('已关闭');
    }
    if (userProfile.value.agent.status == 'refuse') {
        // 店铺审核失败
        uni.navigateTo({
            url: '/pages/sub/swSettled'
        });
    }
};
// 点击商家后台
const sjbackend = () => {
    if (userProfile.value.shop == null) {
        uni.navigateTo({
            url: '/pages/sub/sjSettled'
        });
        return;
    }

    if (userProfile.value.shop.status == 'audit') {
        // 店铺审核中
        uni.navigateTo({
            url: '/pages/sub/submit'
        });
    }
    if (userProfile.value.shop.status == 'normal') {
        // 店铺审核成功
        uni.navigateTo({
            url: '/pages/sub/backend'
        });
    }
    if (userProfile.value.shop.status == 'hidden') {
        // 店铺审核成功
        utils('已关闭');
    }
    if (userProfile.value.shop.status == 'refuse') {
        // 店铺审核失败
        uni.navigateTo({
            url: '/pages/sub/sjSettled'
        });
        utils('审核失败，重新认证');
    }
};
// 点击商务后台
const swhoutai = () => {
    if (userProfile.value.agent == false) {
        uni.navigateTo({
            url: '/pages/sub/swSettled'
        });
        return;
    }

    if (userProfile.value.agent.status == 'audit') {
        // 店铺审核中
        uni.navigateTo({
            url: '/pages/sub/submit'
        });
    }
    if (userProfile.value.agent.status == 'normal') {
        // 店铺审核成功
        uni.navigateTo({
            url: '/pages/sub/shangwu'
        });
    }
    if (userProfile.value.agent.status == 'hidden') {
        // 店铺审核成功
        utils('已关闭');
    }
    if (userProfile.value.agent.status == 'refuse') {
        // 店铺审核失败
        uni.navigateTo({
            url: '/pages/sub/swSettled'
        });
        utils('审核失败，重新认证');
    }
};
//回收
const huishou =() =>{
	uni.navigateTo({
	    url: '/pages/sub/huishou'
	});
}
// 点击抵用券
const purpose = () => {
    uni.navigateTo({
        url: '/pages/sub/voucher'
    });
};
// 点击邀请码
const invite = () => {
    uni.navigateTo({
        url: '/pages/sub/inviteFriends'
    });
};
const fensi = () =>{
	uni.navigateTo({
	    url: '/pages/sub/fensi'
	});
}
</script>

<style lang="scss" scoped>
.content {
    // 常用设置
    .seeting {
        .wai-box1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx 30rpx 30rpx;
        }
        .felx5 {
            margin-bottom: 52rpx;
        }
        .box-flex {
            .flex-img {
                width: 72rpx;
                height: 72rpx;
                margin-bottom: 20rpx;
				border-radius: 50%;
            }
			.contact{
				background: rgba(0,0,0,0);
				border:none,
			}
			.contact::after{
				border: none;
			}
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 25rpx;
            width: 135rpx;
            &:nth-child(4n) {
                margin-right: 0;
            }
        }
        .changyong {
            padding: 26rpx 0 32rpx 38rpx;
        }
        margin: 0 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    // 订单
    .order {
        .order-btm {
            .order-box1 {
                text-align: center;
                font-size: 20rpx;
                color: #333333;
                position: relative;
                .box1-image {
                    width: 56rpx;
                    height: 54rpx;
                    margin-bottom: 22rpx;
                }
                .poinsp {
                    position: absolute;
                    right: -16rpx;
                    top: -10rpx;
                    width: 36rpx;
                    height: 36rpx;
                    background-color: #ff0000;
                    color: #fff;
                    border-radius: 50%;
                    line-height: 36rpx;
                    text-align: center;
                }
            }
            margin-top: 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .order-top {
            .you {
                color: #666666;
                font-size: 25rpx;
                .jur {
                    width: 10rpx;
                    height: 16rpx;
                    margin-left: 8rpx;
                }
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        margin: 10rpx 30rpx 30rpx 30rpx;
        padding: 36rpx 32rpx 42rpx 36rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    // 抵用券
    .consumption {
        .points2 {
            position: absolute;
            bottom: 41rpx;
            right: 50rpx;
            color: #f9bc52;
            font-size: 32rpx;
        }
        .points {
            .poins-img {
                width: 36rpx;
                height: 36rpx;
                margin-right: 15rpx;
            }
            position: absolute;
            bottom: 41rpx;
            left: 64rpx;
            color: #f9bc52;
            font-size: 36rpx;
            display: flex;
            align-items: center;
        }
        .diy {
            .price1 {
                font-size: 52rpx;
                margin-top: 22rpx;
                font-weight: 700;
            }
            position: absolute;
            top: 34rpx;
            left: 52rpx;
            color: #f9be55;
            font-size: 32rpx;
        }
        .diy2 {
            .price1 {
                font-size: 52rpx;
                margin-top: 22rpx;
                font-weight: 700;
            }
            position: absolute;
            top: 34rpx;
            right: 52rpx;
            color: #f9be55;
            font-size: 32rpx;
            color: #fff;
        }
        .quan-img {
            width: 100%;
            height: 290rpx;
        }
        position: relative;
        margin-top: 38rpx;
    }
    // 顶部
    .my-top {
        .mytop-right {
            .sweep {
                width: 35rpx;
                height: 35rpx;
            }
            z-index: 1;
        }
        .mytop-left {
            .prirt {
                width: 108rpx;
                height: 108rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }
            z-index: 1;
            display: flex;
            align-items: center;
        }
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx;
    }
    // 背景色
    .positioning {
        height: 400rpx;
        background: linear-gradient(to bottom, #fbeed9, #f5f5f5);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-top: 36rpx;
    // padding: 36rpx 30rpx;
    padding-bottom: 100rpx;
}
</style>
